<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { FleetDetail, bindShip, cancelBindShip } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      tableData: [],
      formData: {},
      stepId: 1,
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "绑定的船舶", id: 2 },
      ],
      queryData: {
        shipowner_fleet_id: this.$route.query.id,
        statusValue: "",
        search: "",
        page: 1,
        per_page: 15,
      },
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    detailFn(id) {
      console.log(id);
      this.$router.push({ path: "/flotBootDetail", query: { id: id } });
    },
    cancelFn(id) {
      ElMessageBox.confirm("确定取消绑定选择的船舶吗?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const { data } = await cancelBindShip({
          shipowner_ship_id: id,
          shipowner_fleet_id: this.detailId,
        });
        if (data.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          this.getTable();
        }
      });
    },
    getData() {
      FleetDetail({ shipowner_fleet_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
    getTable() {
      bindShip(this.queryData).then((res) => {
        if (res.data.code == 1) {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
        }
      });
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.getData();
    this.getTable();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>船队详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="stepId = item.id"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">船队名称</div>
                  <div class="desText">{{ formData.fleet_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">调配员</div>
                  <div class="desText">{{ formData.fleet_tpy_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText">{{ formData.fleet_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船队介绍</div>
                  <div class="desText">{{ formData.fleet_introduce }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>船员列表({{ total }})</div>
              </div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="ship_name"
                  show-overflow-tooltip
                  label="船名"
                />
                <el-table-column prop="qh" show-overflow-tooltip label="旗号" />
                <el-table-column prop="hh" show-overflow-tooltip label="呼号" />
                <el-table-column prop="imo" show-overflow-tooltip label="imo" />
                <el-table-column
                  prop="cblx"
                  show-overflow-tooltip
                  label="船舶类型"
                />
                <el-table-column
                  prop="cbhq"
                  show-overflow-tooltip
                  label="船舶航区"
                />
                <el-table-column
                  prop="zhl"
                  show-overflow-tooltip
                  label="载货量"
                />
                <el-table-column
                  prop="zcsj"
                  show-overflow-tooltip
                  label="造船时间"
                />

                <el-table-column prop="Name" width="100" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        class="greenText ctrlText"
                        @click="detailFn(row.shipowner_ship_id)"
                      >
                        详情
                      </div>
                      <div
                        class="redText ctrlText"
                        @click="cancelFn(row.shipowner_ship_id)"
                      >
                        取关
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="getData"
                  @current-change="getData"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
